<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<!-- <meta name="viewport" content="width=device-width, initial-scale=0.5 ,user-scalable=no" /> -->
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<script src="../javascript/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../javascript/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}

			.box {
				/*设置整体盒子位置*/
				display: block;
				width: 450px;
				margin-top: 60px;
				margin-left: auto;
				margin-right: auto;
			}

			h1 {
				/*设置主标题大小*/
				font-size: 80px;
				line-height: 80px;
				display: inline-block;
			}

			.best,
			.score {
				float: right;
				display: inline-block;
				height: 80px;
				text-align: center;
				background-color: #23527C;
				margin-left: 15px;
				padding: 0 15px 0 15px;
				border-radius: 12px;
				width: 80px;
				font-size: 18px;
				line-height: 30px;
			}

			.numbers {
				font-size: 30px;
				line-height: 50px;
				color: #C4FFFF;
			}

			.row {
				/*加行隔开效果*/
				margin-top: 15px;
			}

			.words {
				/*字体大小和间距*/
				height: 30px;
				line-height: 15px;
				font-size: 15px;
				display: inline-block;
			}

			.restart {
				/*重启按钮的设置*/
				float: right;
				height: 30px;
				width: 100px;
				border-radius: 5px;
				background-color: #C4E3F3;
				border: none;
			}

			.restart:hover {
				background-color: #C4E3d3
			}

			.restart:active {
				background-color: #C4ffff
			}

			.game {
				margin-top: 15px;
				width: 450px;
				height: 450px;
				background-color: #bbada0;
				border-radius: 15px;
				line-height: 0;
			}

			.gameBlock {
				background-color: #eee4da;
				display: inline-block;
				height: 100px;
				width: 100px;
				margin-top: 10px;
				margin-left: 10px;
				border-radius: 8px;
				float: left;
				line-height: 100px;
				text-align: center;
				font-size: 40px;
			}

			.litterBox {
				display: inline-block;
				height: 100px;
				width: 100px;
				border-radius: 8px;
				position: relative;
			}
		</style>
	</head>

	<body>
		<box class="box">
			<header>
				<div id="score">
					<h1>2048</h1>
					<div class="best">
						<span>BEST</span><br />
						<span class="numbers">{{best}}</span>
					</div>
					<div class="score">
						<span>SCORE</span><br />
						<span class="numbers">{{score}}</span>
					</div>
				</div>
				<div class="row">
					<div class="words">
						<strong>Play 2048 Game Online</strong>
						<p>Join the numbers and get to the <strong>2048 tile</strong>!</p>
					</div>
					<button class='restart'>New Game</button>
				</div>
			</header>
			<div class="game">
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
				<div class="gameBlock"><span class="litterBox"></span></div>
			</div>
		</box>
		<script type="text/javascript">
			window.onload = function() {
				var score = new Vue({
					el: "#score",
					data: {
						score: 0,
						best: 0
					}
				});

				function setColor(block, num) { //设置颜色
					if (num == 0) {
						block.style.backgroundColor = 'transparent';
					} else {
						block.style.backgroundColor = "#" + (15589576 - num - num * 100 * 4).toString(16);
					}
				}

				function save() { //客户端保存页面信息
					if (typeof(Storage) !== undefined) {
						var score_ = score.$data.score;
						var best_ = score.$data.best;
						var blocksNum = (function() {
							var arr = new Array();
							var blocks = document.getElementsByClassName("litterBox");
							for (var i = 0; i < 16; i++) {
								arr.push(blocks[i].innerText);
							}
							return arr;
						})();
						localStorage.setItem("2048score", score_);
						if(new Number(localStorage.getItem("2048best"))<best_){
							localStorage.setItem("2048best", best_);
						}
						localStorage.setItem("2048blocksNum", blocksNum.toString());
					}
				}

				function load() { //读取已储存信息
					if (typeof(Storage) !== undefined) {
						function isOver(blocks){//一维数组用于判断游戏是否结束的,以便决定是否载入之前的存档
							for(var i=0;i<3;i++){
								for(var k=0;k<3;k++){
									if(blocks[i*4+k]==blocks[i*4+k+1]||blocks[i*4+k]==blocks[i*4+k+4]||blocks[i*4+k]==''){
										return false;
									}
								}
							}
							return true;
						}
						var score_ = localStorage.getItem('2048score');
						var best_ = localStorage.getItem('2048best');
						var blocksNum = localStorage.getItem('2048blocksNum');
						if (score_ == undefined || best_ == undefined || blocksNum == undefined) {
							return 0;
						}
						blocksNum = blocksNum.split(',');
						console.log("score:" + score_);
						console.log("best:" + best_);
						console.log("blocksNum:" + blocksNum);
						
						score.$data.best = new Number(best_);
						if(!isOver(blocksNum)){
							score.$data.score = new Number(score_);
							var blocks = document.getElementsByClassName("litterBox");
							for (var i = 0; i < 16; i++) {
								if (blocksNum[i] != '') {
									numbers++;
									blocks[i].innerText = blocksNum[i];
									setColor(blocks[i], blocksNum[i]);
								}
							}
						}else{
							return 0
						}
						return 1;
					}
					return 0;
				}

				function sleep(time) { //睡眠
					var t = Date.now();
					while (Date.now() - t < time) {;
					}
				}

				function setNum(blocks) { //随机设置一个数字
					var place = Math.round(Math.random() * 100) % (16 - numbers) + 1;
					//						console.log(place);
					for (var i in blocks) {
						for (var k in blocks[i]) {
							if (blocks[i][k].innerText == "") {
								place--;
							}
							if (place == 0) {
								var num = Math.random() > 0.5 ? 2 : 4;
								//showNew(i,k,blocks,num);

								blocks[i][k].innerText = num;
								numbers++;
								setColor(blocks[i][k], num);
								return;
							}
						}
					}
				}
				document.getElementsByClassName("restart")[0].onclick = function() { //重置按钮
					for (var i in blocks) {
						for (var k in blocks[i]) {
							blocks[i][k].innerText = "";
							setColor(blocks[i][k], 0);
						}
					}
					score.$data.score = 0; //vue 部分
					numbers = 2;
					setNum(blocks, numbers);
					setNum(blocks, numbers);
					save();
				};

				function blockMove(block, left, top) { //移动特效
				}

				function showNew(i, k, blocks, num) { //新节点特效

				}

				function addup(i, k, a, blocks) { //叠加特效

				}



				function isGameOver(blocks) { //判断是否游戏结束
					if (numbers != 16) {
						return false;
					} else {
						for (var i = 0; i < 3; i++) {
							for (var k = 0; k < 3; k++) {
								if (blocks[i][k].innerText == blocks[i][k + 1].innerText || blocks[i][k].innerText == blocks[i + 1][k].innerText) {

									return false;
								}
							}
						}
						return true;
					}
				}

				function left(blocks) { //向做移动
					var flag = 0;
					for (var i = 0; i < 4; i++) {
						for (var k = 0; k < 3; k++) {
							if (blocks[i][k].innerText == "") {
								for (var a = k + 1; a < 4; a++) {
									if (blocks[i][a].innerText != "") { //如果为空就把右边非空值移动过来
										var flag = {
											flag: 0
										};
										blockMove(i, k, a, blocks);
										num = new Number(blocks[i][a].innerText);
										blocks[i][k].innerText = num;
										setColor(blocks[i][k], num);
										blocks[i][a].innerText = "";
										blocks[i][a].style.backgroundColor = "#eee4da";
										flag = 1;
										break;
									}
								}
							}
							if (blocks[i][k].innerText != "") { //如果不为空,判断是否有相同值
								for (var a = k + 1; a < 4; a++) {
									if (blocks[i][a].innerText != "") {
										if (blocks[i][k].innerText == blocks[i][a].innerText) {
											num = (new Number(blocks[i][k].innerText)) * 2;
											blocks[i][k].innerText = num;
											setColor(blocks[i][k], num);
											blocks[i][a].innerText = "";
											blocks[i][a].style.backgroundColor = "#eee4da";
											score.$data.score += new Number(blocks[i][k].innerText); //vue 部分
											if (score.$data.score > score.$data.best) {
												score.$data.best = score.$data.score;
											}
											numbers--;
											flag = 1;
										}
										break;
									}
								}
							}
						}
					}

					if (flag == 1) {
						setNum(blocks);

					}
				}

				function right(blocks) {
					var arr = new Array();
					for (var i in blocks) {
						arr.push(new Array());
						for (var k in blocks[i]) {
							arr[i].push(blocks[i][3 - k]);
						}
					}
					left(arr);
				}

				function up(blocks) {
					var arr = new Array();
					for (var i in blocks) {
						arr.push(new Array());
						for (var k in blocks[i]) {
							arr[i].push(blocks[k][i]);
						}
					}
					left(arr);
				}

				function down(blocks) {
					var arr = new Array();
					for (var i in blocks) {
						arr.push(new Array());
						for (var k in blocks[i]) {
							arr[i].push(blocks[3 - k][i]);
						}
					}
					left(arr);
				}

				var numbers = 0;
				var blocks = (function() { //获取二维的block数组对象
					var arr = new Array();
					var blocks = document.getElementsByClassName("litterBox");
					for (var i = 0; i < 4; i++) {
						arr.push(new Array());
						for (var k = 0; k < 4; k++) {
							arr[i].push(blocks[k + i * 4]);
						}
					}
					return arr;
				})();
				//console.log(blocks);
				if (load() == 0) {
					setNum(blocks);
					setNum(blocks);
				}
				document.onkeydown = function(e) {
					switch (e.key) {
						case 'ArrowLeft':
							left(blocks);
							break;
						case 'ArrowUp':
							up(blocks);;
							break;
						case 'ArrowDown':
							down(blocks);
							break;
						case 'ArrowRight':
							right(blocks);
							break;
						case 'a':
							left(blocks);
							break;
						case 'w':
							up(blocks);;
							break;
						case 's':
							down(blocks);
							break;
						case 'd':
							right(blocks);
							break;
						case 'A':
							left(blocks);
							break;
						case 'W':
							up(blocks);;
							break;
						case 'S':
							down(blocks);
							break;
						case 'D':
							right(blocks);
							break;
						default:
							console.log(e.key);
					}

				};
				document.onkeyup = function() {
					save();
					if (isGameOver(blocks)) {
						alert("Game over !");
					}
				}


			}

			function reSet() { //用于测试,移除浏览器储存数据
				localStorage.removeItem("2048score");
				localStorage.removeItem("2048best");
				localStorage.removeItem("2048blocksNum");
			}
		</script>
	</body>

</html>
